<template>
    <div class="box1">
        <div class="top000">
            <div class="bd0"></div>
            <h1>热门资讯</h1>
        </div>
        <div class="building">
            <el-row>
                <el-col  v-for="(fid, index) in pageInfo" :key="index" :offset="1.1">
                    <el-card class="box-card">
                        <div class="card-left">
                            <img :src="fid.pic1" class="pic" @click="openw(fid.link)" />
                        </div>
                    </el-card>
                    <div class="card-right">
                        <div class="title"  @click="openw(fid.link)">{{ fid.title }}</div>
                        <div class="infoDate">发布时间：{{ fid.infoDate }}</div>
                    </div>
                    <!-- </div> -->
                </el-col>
            </el-row>
            <div class="bd0"></div>

            <div class="fenye">
                <el-pagination :background="true" v-model:current-page="currentPage" v-model:page-size="pageSize"
                    layout="prev, pager, next, jumper" @size-change="handleSizeChange" :total="37962"
                    @current-change="handleCurrentChange" />
            </div>
            <div class="bd"></div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            tableData: [],
            pageInfo: {},
            pageSize: 16,
            currentPage: 1,
        };
    },
    methods: {
        openw(e) {
            // window.location.href = e, '_blank'
            window.open(e, "_blank");

        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getPageData(this.currentPage, this.pageSize);
            console.log("size", pageSize);
        },
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.getPageData(this.currentPage, this.pageSize);
            console.log("num", pageNum);
        },
        getPageData(num, size) {
            //得到分页数据
            this.$http
                .get("filmHot/v1/hotInfo", { params: { pageNum: num, pageSize: size } })
                .then((response) => {
                    this.pageInfo = response.data;
                    this.tableData = this.pageInfo.list;
                    console.log(response.data);
                });
        },
    },
    mounted() {
        this.getPageData(1, 16);
    },
};
</script>
  <!-- 修改分页样式 -->
<style>
.el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: rgb(255, 255, 255);
    color: rgb(5, 5, 5);
}

.el-pagination span {
    background: rgb(230, 230, 230);
    color: #0e0d0d;
    padding: 0 5px;
    line-height: 2;
    border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.bd0 {
    height: 16px;
}

.top000 {
    height: 90px;
    width: 98%;
    margin-left: 10px;
    background-color: #577dee;
    border-radius: 10px;
    color: rgb(253, 248, 248);

    h1 {
        margin-left: 450px;
        font-size: 2.5em;
        margin-top: 10px;
        text-transform: uppercase;
        letter-spacing: 10px;
        font-family: Lora, serif;
        font-weight: 200;

        &::before {
            content: "─";
            margin-right: 0.6em;
            color: #686868;
            color: #d8d8d8;
        }

        &::after {
            content: "─";
            margin-left: 0.6em;
            color: #686868;
            color: #d8d8d8;
        }
    }
}

.building {
    width: 98%;
    margin-left: 16px;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
}

.box1 {
    /* background: url("/public/koubeibg.jpg");
    background-size: cover; */
    background-color: rgb(230, 229, 229);
    overflow: auto;
    width: 100%;
}

.fenye {
    margin-top: 16px;
    margin-left: 270px;
}

.none {
    height: 20px;
}
.title {
    font-size: 20px;
  font-weight: 900;
  margin-left: 200px;
  margin-right: -800px;
  margin-top: -10px;
  color: rgb(10, 10, 10);
}

.pic {
    width: 260px;
    height: 170px;
    margin-left: -20px;
    margin-top: -40px;
}


.link {
    color: rgb(33, 50, 126);
    font-size: 14px;
    font-weight: 700;
    margin-top: -18px;
    float: right;
    margin-right: 20px;
}

.box-card {
    width: 1250px;
    height: 170px;
    border: none;
    margin-top: 20px;
    margin-left: 20px;
    background-color: rgb(255, 255, 255);
}

.card-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 160px;
    width: 320px;
}

.card-right {
    color: rgb(155, 152, 152);
    margin-top: -130px;
    font-size: 8px;
    width: 150px;
    height: 136px;
    margin-left: 116px;
}

.infoDate {
    width: 300px;
    font-size: 14px;
    margin-left: 200px;
    margin-top: 20px;
    font-weight: 500;
}
</style>